<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Simple Scrollspy</title>
    <link rel="stylesheet" href="demo.css">
</head>

<body>

    <div class="">
        <nav class="navbar">
            <div class="container">
                <div class="navbar-brand">
                    <h1>
                        <a href="">Simple Scrollspy</a>
                    </h1>
                </div>

                <div class="menu" id="main-menu">
                    <a class="menu-item active" href="#hero">Hero</a>
                    <a class="menu-item" href="#section-1">Section 1</a>
                    <a class="menu-item" href="#section-2">Section 2</a>
                    <a class="menu-item" href="#section-3">Section 3</a>
                    <a class="menu-item" href="#section-4">Section 4</a>
                </div>
            </div>
        </nav>

        <div class="section scrollspy" id="hero">Hero</div>
        <div class="section scrollspy" id="section-1">Section 1</div>
        <div class="section scrollspy" id="section-2">Section 2</div>
        <div class="section scrollspy" id="section-3">Section 3</div>
        <div class="section scrollspy" id="section-4">Section 4</div>

        <footer class="footer">
            <div class="container">
                <p>
                    <a href="https://github.com/huukimit/simple-scrollspy" title="Fork me on Github">
                        Simple Scrollspy - Github
                    </a>
                </p>
            </div>
        </footer>


    </div>
    <script src="./scroll.js"></script>
    <script>
        let instance = new ScrollSpy('#main-menu', {
            sectionClass: '.scrollspy',
            menuActiveTarget: '.menu-item',
            offset: 100,
            activeClass: "active",
            scrollContainer: '.scroll-container', //监听滚动的区域可选
        })
        instance.init()
    </script>


</body>

</html>